<template>
  <div class="view">
    <div class="container">
      <!--带筛选表格组件-->
      <table-list
        :data="listData"
        :column-cfg="columnCfg"
        :total-size="totalSize"
        :page-size="filterParams.pageSize"
        :loading="dataLoading"
        @refresh-list="getList"
        @change-pass="changeUserPass"
        @switch-enable="switchEnable"
        @edit-item="handleEditItem"
        @delete-item="handleDeleteItem"
      >
        <div class="view-button">
          <!-- <el-button
            icon="el-icon-document-add"
            type="primary"
            @click="handleItemAdd"
            >新增
          </el-button> -->
          <auth-btn
            btn-id="btn_add"
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="handleItemAdd"
            >新增</auth-btn
          >
        </div>
      </table-list>
    </div>
    <!--  详情对话框  -->
    <item-detail ref="itemDetail" @data-change="getList"></item-detail>
  </div>
</template>

<script>
import TableList from "@/components/TableList/index";
import ItemDetail from "./components/ItemDetail";
import AuthBtn from "@/components/AuthBtn";

import {
  list,
  batchDelete,
  userDisable,
  userEnable,
  userPassSet,
} from "@/api/system/user";
import { passEncrypt } from "@/utils/rsa";
import ListAction from "@/views/_mixins/list-action";

export default {
  name: "UserManage",
  mixins: [ListAction],
  components: {
    TableList,
    ItemDetail,
    AuthBtn,
  },
  props: {},
  data() {
    return {
      list: list,
      batchDelete: batchDelete,
      idLabel: "userId",
      deleteTip: "此操作将永久删除该用户, 是否继续?",
      filterParams: { pageSize: 10 }, //筛选条件，每次更新会保存使用的筛选条件
      columnCfg: {
        userName: {
          label: "登录名",
          filter: {
            label: "用户登录名",
            type: "input",
            placeholder: "请输入登录名",
          },
        },
        realName: {
          label: "昵称",
        },
        tel: {
          label: "手机号",
        },
        enable: {
          label: "用户状态",
          dictKey: "data_status",
          tag: "normal",
          filter: { type: "select" },
        },
        createTime: {
          label: "创建时间",
          minWidth: "160",
          sortable: true,
          /*filter: {type: 'date-picker', pickerType: 'daterange'}*/
        },
        ":action": {
          label: "操作",
          width: 190,
          actionArr: [
            {
              label: "密码修改",
              event: "change-pass",
              btnType: "",
            },
            {
              label: "启用",
              event: "switch-enable",
              btnType: "",
              condition: { enable: 0 },
            },
            {
              label: "禁用",
              event: "switch-enable",
              btnType: "",
              condition: { enable: 1 },
            },
            {
              label: "编辑",
              event: "edit-item",
              btnType: "",
            },
            {
              label: "删除",
              event: "delete-item",
              btnType: "danger",
            },
          ],
        },
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    //修改密码
    changeUserPass(row) {
      this.$prompt("请输入新密码", "密码修改", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputType: "password",
        inputPlaceholder: "至少8位且必有数字、特殊字符、字母",
        inputPattern:
          /^(?=.*[A-Za-z])(?=.*\d)(?=.*[`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]])[A-Za-z\d`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]]{8,}$/,
        inputErrorMessage: "至少8位且必有数字、特殊字符、字母",
      })
        .then(async ({ value }) => {
          let passwd = await passEncrypt(value);
          userPassSet(row.userId, passwd).then((res) => {
            this.$message.success("密码修改成功");
          });
        })
        .catch(() => {});
    },

    //启用禁用
    switchEnable(row) {
      let tip = row.enable ? "禁用" : "启用";
      this.$confirm("即将" + tip + "此账号, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: 'cancel-msgbtn', confirmButtonClass: 'confirm-msgbtn', type: 'warning',
      })
        .then(() => {
          if (row.enable) {
            userDisable(row.userId).then((res) => {
              this.$message.success(tip + "成功");
              this.getList();
            });
          } else {
            userEnable(row.userId).then((res) => {
              this.$message.success(tip + "成功");
              this.getList();
            });
          }
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.view {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 16px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  &::-webkit-scrollbar-track-piece {
    background: rgba(200, 200, 200, 0.1);
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 8px;
    background: rgba(200, 200, 200, 0.5);
  }
}
</style>
